<script setup>
import {
  ArrowDown,
} from '@element-plus/icons-vue'
import { ref, getCurrentInstance, reactive } from 'vue';
import SearchVue from '../views/langxia/Search.vue';
import { ElMessage } from 'element-plus'


let isLogin = ref(true);
let notLogin = ref(false);
let userdata = reactive({});
let codema=ref("")
// 默认头像
let tx_url = ref(
  "https://img1.baidu.com/it/u=1106128825,2416237361&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
);
// 是否登录
const { proxy } = getCurrentInstance(); //正常使用:语法糖环境默认为setup钩子
async function IsLogin() {
  let res = await proxy.$axios.get("islogin", { params: { id: 99 } });
  userdata.value = res;
  // console.log(res,res.data.code);
  // console.log(userdata.value.data.userInfo[0].usertx,89);
  // 登录了
  if (res.data.code == 2002) {
    isLogin.value = true
    notLogin.value = false
    // 头像网址
    if (userdata.value.data.userInfo[0].usertx != 0) {
      tx_url.value = userdata.value.data.userInfo[0].usertxF
    }

    codema.value = userdata.value.data.code
  }
  // 没登录
  else if (res.data.code == 4004) {
    isLogin.value = false
    notLogin.value = true
    codema.value = userdata.value.data.code
  }
}
IsLogin()
console.log(codema, 78);
// 退出登录
async function quit() {
  let re1 = await proxy.$axios.get('nocookie', { params: { id: 99 } })
  console.log(re1);
}
// 发布车辆跳转
function carto() {
  console.log(userdata.value.data.code);
  if (userdata.value.data.code == 2002) {
    window.open("/#/releaseCar")
  } else {
  }
}


// 发布提示还是跳转
const open4 = (e, arg) => {
  console.log(arg);
  if (userdata.value.data.code == 4004) {
    ElMessage.error('请先登录')
  } else if (userdata.value.data.code == 2002) {
    if (arg == 12) {
      window.open("/#/releaseCar")
    } else if (arg = 13) {
      window.open("/#/newsRelease")
    }
  }
}
console.log(332);

</script>
<template>
  <el-row class="cardaohang">
    <!-- 下拉菜单 -->
    <el-col :span="3">
      <el-dropdown size="large">
        <span class="el-dropdown-link">

          <router-link :to="{path:'/Carshouye',query:{id:0}}"> 租车选择导航</router-link>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="carMenu">
            <el-dropdown-item class="carItem">
              <router-link :to="{path:'/Carshouye',query:{id:1}}">轿车</router-link>
            </el-dropdown-item>
            <el-dropdown-item class="carItem">
              <router-link :to="{path:'/Carshouye',query:{id:2}}">商务车</router-link>
            </el-dropdown-item>
            <el-dropdown-item class="carItem">
              <router-link :to="{path:'/Carshouye',query:{id:3}}">越野车</router-link>
            </el-dropdown-item>
            <el-dropdown-item class="carItem">
              <router-link :to="{path:'/Carshouye',query:{id:4}}">大巴</router-link>
            </el-dropdown-item>
            <el-dropdown-item class="carItem">
              <router-link :to="{path:'/Carshouye',query:{id:6}}">豪车</router-link>
            </el-dropdown-item>
            <el-dropdown-item class="carItem">
              <router-link :to="{path:'/Carshouye',query:{id:7}}">婚车</router-link>
            </el-dropdown-item>
            <el-dropdown-item class="carItem">
              <router-link :to="{path:'/Carshouye',query:{id:8}}">房车</router-link>
            </el-dropdown-item>

          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
    <el-col :span="1">
      <div class="grid-content ep-bg-purple">
        <router-link to="/">首页</router-link>
      </div>
    </el-col>
    <el-col :span="2">

      <div class="grid-content ep-bg-purple-light ">

        <router-link to="/yj/enterprise">企业租车</router-link>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple">
        <router-link to="/yj/personal">个人租车</router-link>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple-light">
        <router-link to="/yj/wedding">婚庆租车</router-link>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple">
        <router-link to="/yj/aircraft">接机送机</router-link>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple-light">
        <router-link to="/profile">公司介绍</router-link>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple">
        <router-link to="/yj/news">新闻动态</router-link>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple-light">
        <router-link to="/problem">常见问题</router-link>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple-light">
        <router-link to="/service">服务说明</router-link>
      </div>
    </el-col>
    <el-col :span="2">

      <div class="grid-content ep-bg-purple">
        <el-dropdown size="large">
          <span class="el-dropdown-link">
            发布<el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu class="carMenu">
              <el-button :plain="true" @click="open4($event,12)" class="tanchang">发布车辆</el-button>
              <el-button :plain="true" @click="open4($event,13)" class="tanchang tan2">发布新闻</el-button>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-col>


    <el-col :span="2">
      <div class="grid-content ep-bg-purple-light">
        <div class="touxiang">
          <router-link to="/center"><img v-if="isLogin" :src="tx_url" title="点击进入个人中心" /></router-link>
          <div class="tuichu" @click="quit">
            <router-link to="/login">退出</router-link>
          </div>
        </div>
        <div v-if="notLogin" class="login1">
          <router-link to="/login">登录</router-link>
        </div>

      </div>
    </el-col>
  </el-row>
  <SearchVue></SearchVue>
</template>
<style lang="scss" scoped>
// 导航栏的整个盒子
.el-row {
  margin: auto;
  // width: 100%;
  // position: fixed;
  height: 40px;

  background-color: #162D46;

  color: white;
}

li {
  display: none;
  font-size: 14px;
  color: rgb(184, 14, 14);
  z-index: 99999;
}

a {
  color: white;
  text-decoration: none;
}

//  下拉列表
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}


.cardaohang {
  text-align: center;
}


.el-dropdown-link {
  line-height: 40px;
  font-size: 16px;
  color: white;

}

// .carMenu {
//   width: 130px;

//   a {
//     display: inline-block;
//     color: rgb(96, 98, 102);
//     width: 100%;
//     text-align: center;
//   }


  .carMenu {
    width: 130px;
    text-align: center;

    a {
      display: inline-block;
      color: rgb(96, 98, 102);
      width: 100%;
      text-align: center;
    }

    a:hover {
      color: rgb(219, 37, 52);
    }


  }


  // 每个标题的样式
  .grid-content {
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    cursor: pointer;
  }

  // 头像
  .touxiang {
    display: flex;

    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .tuichu {
      display: inline-block;
      display: none;
      // height: 40px;
      // line-height: 40px;
      margin-left: 10px;
    }


  }


  .touxiang:hover {
    .tuichu {
      display: block;
    }
  }

  a:hover {
    color: rgb(255, 199, 93);
  }

  // 发布弹窗
  .tanchang {
    border: none;
    text-align: center;
  }

  .tan2 {
    margin-right: 12px;
  }

  // 登录按钮
  .login1:hover {
    background-color: rgb(219, 37, 52);

    a {
      color: white;
    }
  }
</style>
